<template>
  <div class="box">
    <div class="header">
      
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch(value)"
          @cancel="onCancel"
        />
     
    </div>
    <div class="main">
      <div class="left">
        <van-sidebar v-model="activeKey" @change="shiftfn">
          <div v-for="(item, index) in catelist" :key="index">
            <van-sidebar-item :title="item" />
          </div>
        </van-sidebar>
      </div>

      <div class="right" >
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="(item, index) in brandlist" :key="index">
            <img
              src="https://img13.360buyimg.com/focus/s140x140_jfs/t1/136893/38/305/31308/5ecb84dcE410bc59a/36568e70a84f8807.jpg"
              class="gridimg"
            />
            <p>{{ item.brand }}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { doCategorylist, doCategoryBrandlist, doSearch } from "../api/kind";
import Vue from "vue";
import { Sidebar, SidebarItem, Grid, GridItem, Search, Toast } from "vant";

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Search);
export default {
  data() {
    return {
      activeKey: 0,
      catelist: [],
      brandlist: [],
      value: "",
    };
  },
  methods: {
    shiftfn() {
      doCategoryBrandlist({ category: this.catelist[this.activeKey] }).then(
        (res) => {
          //console.log(this.activeKey);
          console.log(res);
          this.brandlist = res.data.data;
          console.log(this.brandlist);
        }
      );
    },
    onSearch(value) {
      //分类搜索有问题
      this.$router.push('/search/'+value)
      doSearch({count:1,limitNum:12,keyword:this.value}).then((res) => {
        console.log(res);
      });
    },
    onCancel() {
      Toast("取消");
    },
  },
  created() {
    doCategorylist().then((res) => {
      //console.log(res);
      if (res.data.code == "200") {
        this.catelist = res.data.data;
        this.shiftfn();
      }
    });
  },
};
</script>

<style scoped>
.box {
  height: 100%;
}
.header {
  height: 0.4rem;
}
.main {
  height: calc(100%-0.4rem);
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
}
.left {
  width: 20%;
}
.right {
  width: 79%;
  position: fixed;
  left: 21%;
  top: 0.43rem;
}

.gridimg {
  width: 100%;
  padding-bottom: 0.1rem;
}
</style>